React useEvent: Menstabilkan Penangan Peristiwa untuk Aplikasi yang Tangguh

Menggunakan `useEvent` dalam Praktik

Mari kita kembali ke contoh sebelumnya dan menerapkan `useEvent` untuk menyelesaikan masalah tersebut.

Memperbaiki Stale Closures

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error karena argumen mungkin tidak benar
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Sekarang, `handleClick` adalah fungsi yang stabil, tetapi saat dipanggil, ia mengakses nilai terbaru dari `count` melalui ref. Ini mencegah masalah stale closure.

Mencegah Render Ulang yang Tidak Perlu

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error karena argumen mungkin tidak benar
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Karena `handleClick` sekarang menjadi referensi fungsi yang stabil, `ChildComponent` hanya akan di-render ulang ketika props-nya *benar-benar* berubah, sehingga meningkatkan performa.

Implementasi Alternatif dan Pertimbangan

`useEvent` dengan `useLayoutEffect`

Dalam beberapa kasus, Anda mungkin perlu menggunakan `useLayoutEffect` alih-alih `useEffect` di dalam implementasi `useEvent`. `useLayoutEffect` dijalankan secara sinkron setelah semua mutasi DOM, tetapi sebelum browser sempat melakukan paint. Ini bisa menjadi penting jika penangan peristiwa perlu membaca atau memodifikasi DOM segera setelah peristiwa dipicu. Penyesuaian ini memastikan bahwa Anda menangkap state DOM yang paling mutakhir di dalam penangan peristiwa Anda, mencegah potensi inkonsistensi antara apa yang ditampilkan komponen Anda dan data yang digunakannya. Memilih antara `useEffect` dan `useLayoutEffect` bergantung pada persyaratan spesifik dari penangan peristiwa Anda dan waktu pembaruan DOM.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Peringatan dan Potensi Masalah

• Kompleksitas: Meskipun `useEvent` memecahkan masalah spesifik, ia menambahkan lapisan kompleksitas pada kode Anda. Penting untuk memahami konsep yang mendasarinya untuk menggunakannya secara efektif.
• Penggunaan Berlebihan: Jangan gunakan `useEvent` secara sembarangan. Terapkan hanya saat Anda menghadapi stale closure atau render ulang yang tidak perlu terkait dengan penangan peristiwa.
• Pengujian: Menguji komponen yang menggunakan `useEvent` memerlukan perhatian cermat untuk memastikan bahwa logika penangan yang benar sedang dieksekusi. Anda mungkin perlu melakukan mock pada hook `useEvent` atau mengakses `handlerRef` secara langsung dalam pengujian Anda.

Perspektif Global tentang Penanganan Peristiwa

Saat membangun aplikasi untuk audiens global, sangat penting untuk mempertimbangkan perbedaan budaya dan persyaratan aksesibilitas dalam penanganan peristiwa:

• Navigasi Keyboard: Pastikan semua elemen interaktif dapat diakses melalui navigasi keyboard. Pengguna di berbagai wilayah mungkin mengandalkan navigasi keyboard karena disabilitas atau preferensi pribadi.
• Peristiwa Sentuh (Touch Events): Dukung peristiwa sentuh untuk pengguna di perangkat seluler. Pertimbangkan wilayah di mana akses internet seluler lebih umum daripada akses desktop.
• Metode Input: Waspadai berbagai metode input yang digunakan di seluruh dunia, seperti metode input bahasa Cina, Jepang, dan Korea. Uji aplikasi Anda dengan metode input ini untuk memastikan bahwa peristiwa ditangani dengan benar.
• Aksesibilitas: Selalu ikuti praktik terbaik aksesibilitas, memastikan penangan peristiwa Anda kompatibel dengan pembaca layar dan teknologi bantu lainnya. Ini sangat penting untuk pengalaman pengguna yang inklusif di berbagai latar belakang budaya.
• Zona Waktu dan Format Tanggal/Waktu: Saat berurusan dengan peristiwa yang melibatkan tanggal dan waktu (misalnya, alat penjadwalan, kalender janji temu), perhatikan zona waktu dan format tanggal/waktu yang digunakan di berbagai wilayah. Sediakan opsi bagi pengguna untuk menyesuaikan pengaturan ini berdasarkan lokasi mereka.

Alternatif untuk `useEvent`

Meskipun `useEvent` adalah teknik yang kuat, ada pendekatan alternatif untuk mengelola penangan peristiwa di React:

• Mengangkat State (Lifting State): Terkadang, solusi terbaik adalah mengangkat state yang menjadi sandaran penangan peristiwa ke komponen tingkat yang lebih tinggi. Ini dapat menyederhanakan penangan peristiwa dan menghilangkan kebutuhan akan `useEvent`.
• `useReducer`:** Jika logika state komponen Anda kompleks, `useReducer` dapat membantu mengelola pembaruan state dengan lebih dapat diprediksi dan mengurangi kemungkinan stale closure.
• Komponen Kelas (Class Components): Meskipun kurang umum di React modern, komponen kelas menyediakan cara alami untuk mengikat penangan peristiwa ke instance komponen, menghindari masalah closure.
• Fungsi Inline dengan Dependensi: Gunakan pemanggilan fungsi inline dengan dependensi untuk memastikan nilai-nilai baru diteruskan ke penangan peristiwa. `onClick={() => handleClick(arg1, arg2)}` dengan `arg1` dan `arg2` yang diperbarui melalui state akan membuat fungsi anonim baru pada setiap render, sehingga memastikan nilai closure yang diperbarui, tetapi akan menyebabkan render ulang yang tidak perlu, hal yang justru dipecahkan oleh `useEvent`.